<template>
    <div>
        <el-form :inline="true" :model="formUser" size="mini">
            <el-form-item label="用户名">
                <el-input v-model="formUser.mail" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="认证状态">
                <el-select v-model="formUser.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="requestSearchUser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="userListData"
                ref="userTable"
                size="small"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="top" inline class="table-expand">
                        <el-form-item label="身份证正面照">
                            <img class="c_user_img" :src="imgUrl + props.row.holdImg" alt="">
                        </el-form-item>
                        <el-form-item label="身份证背面照">
                            <img class="c_user_img" :src="imgUrl + props.row.backImg" alt="">
                        </el-form-item>
                        <el-form-item label="手持照片">
                            <img class="c_user_img" :src="imgUrl + props.row.holdImg " alt="">
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="mail"
                    label="用户名"
                    width="200"
            >
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="邀请码"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="钱包地址"
            >
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="注册时间"
                    width="160"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="认证状态"
                    width="80"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">未认证</span>
                    <span v-else-if="scope.row.status == 1">已认证</span>
                    <span v-else-if="scope.row.status == 2">驳回</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="认证时间"
                    width="160"
            >
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="200"

            >
                <template slot-scope="scope">
                    <el-button type="text" @click="detailsUserClick(scope.row)">详情</el-button>
                    <el-button v-if="scope.row.status != 1" type="success" size="mini"
                               @click="requestStatueChange(scope.row,'1')">通过
                    </el-button>
                    <el-button v-if="scope.row.status != 1" type="warning" size="mini"
                               @click="requestStatueChange(scope.row,'2')">驳回
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetUserList(pagination.prePage)"
                @next-click="requestGetUserList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>


    import axios from 'axios'

    let api = '/manager/user';

    export default {
        name: "UserList",
        data() {
            return {
                userListData: [],
                formUser: {
                    mail: '',
                    status: ''
                },
                statusOptions: [
                    {label: "全部", value: ""},
                    {label: "未认证", value: 0},
                    {label: "已认证", value: 1},
                    {label: "驳回", value: 2},
                ],
                pagination: {
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                },
                imgUrl: axios.defaults.baseImgURL,

            }
        },
        mounted() {
            this.requestGetUserList(this.pagination.pageNum);
        },
        methods: {
            requestGetUserList(page) {
                this.requestAxios.requestCMS('post', api + '/get_list.do', {
                    page: page,
                    size: this.pagination.pageSize,
                    mail: this.formUser.mail,
                    status: this.formUser.status,
                }, (response) => {
                    console.log(111, response);
                    this.userListData = response.data.list;
                    this.pagination.total = response.data.total;
                    this.pagination.prePage = response.data.prePage;
                    this.pagination.pageNum = response.data.pageNum;
                    this.pagination.nextPage = response.data.nextPage;
                })
            },
            requestSearchUser() {
                this.requestGetUserList(1);
            },

            requestStatueChange(row, status) {
                this.requestAxios.requestCMS('post', api + '/validate.do', {
                    id: row.id,
                    status: status,
                }, (response) => {
                    this.$message.success(response.message);
                    this.requestGetUserList(this.pagination.pageNum)
                })
            },

            detailsUserClick(row) {
                this.$refs.userTable.toggleRowExpansion(row)
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetUserList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetUserList(page)
            }
        }
    }
</script>

<style scoped>
    .table-expand {
        display: flex;
        justify-content: space-between;
    }

    .c_user_img {
        width: 340px;
        height: 215px;
    }
</style>
